<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客后台</title>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.js}" type="text/javascript"></script>
    <link th:href="@{/css/head.css}" rel="stylesheet" type="text/css"></link>
    <style>
        body {
            font-size: 12px;
            margin-right: 0px;
            padding-bottom: 10px;
            font-family: Verdana;
            margin: 0;
            padding: 0;
            /* background-color: #EEEEFF; */
        }


        #login_area a {
            text-decoration: none;
            color: #336699;
        }

        #header {
            margin-top: 0px;
            height: 102px;
            vertical-align: middle;
            padding-top: 0px;
        }

        #logo {
            position: absolute;
            left: 10px;
            top: 45px;
            z-index: 999;
            color: #009;;
        }

        #main {
            font-size: 12px;
            font-family: Verdana;
            margin-left: 210px;
            padding-right: 0px;
            padding-top: 0px;
            background-color: #FFF;
            border: 1px solid #666;
            margin-right: 5px;
            margin-top: 0px;
        }

        #main h2 {
            margin: 0px 0px 0px 0px;
            background-color: #B6C9E7;
            padding: 3px;
            border-bottom: 1px solid #666;
            font-family: Arial;
            height: 20px;
            font-size: 13px;
        }

        #main h2 {
            margin: 0px 0px 0px 0px;
            background-color: #B6C9E7;
            padding: 3px;
            border-bottom: 1px solid #666;
            font-family: Arial;
            height: 20px;
            font-size: 13px;
        }

        h2 {
            display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #authors {
            font-family: Verdana;
            top: 131px;
            position: absolute;
            width: 200px;
            left: 5px;
            background-color: #FAFAFA;
            border-left: 1px solid #666;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
            font-size: 12px;
            margin-top: 0px;
            padding-top: 0px;
            overflow: hidden;
        }

        #authors h2 {
            color: #FFF;
            margin-bottom: 2px;
            margin-top: 0px;
            background-color: #6B86B3;
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
            padding-top: 3px;
            padding-bottom: 3px;
            font-family: Verdana;
            font-size: 12px;
            text-align: center;
            text-transform: uppercase;
            font-weight: normal;
            width: 200px;
        }

        #authors ul {
            list-style: none;
            margin-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
            list-style-type: circle;
            padding-top: 5px;
            margin-top: 0px;
            margin-left: 5px;
            width: 190px;
            word-wrap: break-all;
        }

        ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        #authors li {
            border-bottom: 1px dotted #DDDDDD;
            margin-top: 2px;
            line-height: 20px;
            word-wrap: break-all;
            list-style: none;
        }

        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }

        #authors .NavLink a:link,
        #authors .NavLink a:active, #authors .NavLink a:visited {
            text-decoration: none;
            color: #3B5998;
        }

        a:link, a:active {
            color: #009;
        }

        a:-webkit-any-link {
            color: -webkit-link;
            cursor: pointer;
            text-decoration: underline;
        }

        #main .PagerLink {
            padding-bottom: 0px;
            background-color: #FFFFFF;
            padding: 4px;
            padding-bottom: 0px;
            font-family: Arial;
            font-size: 9pt;
            text-align: right;
            font-weight: normal;
            bottom: 0px;
            margin-bottom: 0px;
            margin-right: 10px;
        }

        #main .post {
            font-family: Arial;
            font-size: 12px;
            line-height: 150%;
            border-bottom: none;
            margin-top: 0px;
            padding-top: 0px;
            margin-right: 0px;
            padding-right: 0px;
        }

        #main h3 {
            font-size: 13px;
            padding-left: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 5px;
            background-color: #E5EEF7;
            border-top: 1px solid #666;
            border-bottom: 1px dashed #666;
            padding: 2px;
        }

        h3 {
            display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #main h4 {
            font-family: Verdana, Arial;
            font-size: 13px;
            line-height: 150%;
            font-weight: normal;
            padding-left: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }

        h4 {
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #main a.CommentLink {
            color: #000;
            text-decoration: none;
        }
        #nickname {
            position: absolute;
            right: 10px;
            top: 45px;
            z-index: 999;
            color: #009;;
        }
        .w-e-menu{
            z-index: 2 !important;
        }
        .w-e-text-container{
            z-index: 1 !important;
        }

    </style>
</head>
<body>
<div id="app">
    <div th:include="~{common/head::head}"></div>
    <div id="header">
        <div id="logo">
            <h1><i>个人中心</i></h1>
        </div>
        <div  id="nickname">
            <h1 th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.nickname}"></h1>
        </div>
    </div>
    <div id="main">
        <h2></h2>
        <div class="post"  v-show="index==0">
            <h3>
                添加随笔...
            </h3>
            <div class="field">
                <p>&nbsp;&nbsp;标题</p>
                <input type="text" style="width: 99%" placeholder="请输入标题..." v-model="blog.title">
            </div>
            <div id="editor" class="editor" >

            </div>
            <hr>
            <h3>
                博客类别
            </h3>
            &nbsp;&nbsp;
            <el-select v-model="blog.blogtypeid" placeholder="请选择"   :popper-append-to-body="false">
                <el-option v-for="obj in blogtypes"  :label="obj.typename" :value="obj.id">
                </el-option>
            </el-select>
            <hr>
            <el-button @click="handleAdd">提交</el-button>
        </div>

        <div class="PagerLink" v-show="index==1">
            <input type="text" placeholder="请输入关键字后按回车查询" @keyup.enter="search()" v-model="blog2.title">
            <!--<a href="javascript:void(0)" @click="go2Search()">搜索</a>-->
            &nbsp;&nbsp;
            <a href="javascript:void(0)" @click="showTitle()" v-if="showTitleNum==0">仅列出标题</a>
            <a href="javascript:void(0)" @click="showMsg()" v-if="showTitleNum==1">列出全部内容</a>
        </div>

        <div>

        </div>
        <div class="post"  v-show="index==1">
            <div v-if="blogs==null || blogs.length==0">
                <h4>暂无博客</h4>
            </div>
            <div v-if="blogs!=null && blogs.length>0"  v-for="obj in blogs">
                <h3>
                    {{obj.title}}
                </h3>
                <h4>
                    <p v-if="showTitleNum==0">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        {{obj.msg}}
                        &nbsp;&nbsp;
                        <a href="javascript:void(0)" @click="readContent(obj.id)">阅读全文</a>
                    </p>
                    <p class="postfoot" align="right">
                        发布时间:{{obj.tcreate}}&nbsp;
                        作者:{{obj.author}}&nbsp;
                        [评论数:{{obj.commentnum}}]&nbsp;
                        [阅读数:{{obj.readnum}}]&nbsp;
                        [点赞数:{{obj.likenum}}]&nbsp;
                        <el-button type="text" @click="delById(obj.id)">删除</el-button>
                        <el-button type="text" @click="readComments(obj.id)">查看评论</el-button>
                    </p>
                </h4>
            </div>

        </div>

        <div v-show="index==2">
            <el-button type="text" @click="reback()">返回</el-button>
            <h4 v-if="comments==null || comments.length==0">
                <span>暂时没有评论</span>
            </h4>
            <div v-if="comments!=null && comments.length>0" class="post"  v-for="obj in comments"  >
                <h3>
                    {{obj.nickname}}&nbsp;评论:
                </h3>

                <h4>
                    <p>
                        {{obj.content}}
                    </p>
                    <p class="postfoot" align="right">
                        <el-button type="text" @click="delOneComment(obj)">删除</el-button>
                    </p>
                </h4>

            </div>
        </div>


    </div>
    <div id="authors">
        <h2>
            操作
        </h2>
        <ul class="NavLink">
            <li class="natitle">
                <a href="javascript:void(0)" @click="changIndex2Zero()">发表博客</a>
            </li>
            <li class="natitle">
                <a href="javascript:void(0)" @click="changIndex2One()">我的博客</a>
            </li>
        </ul>
    </div>
</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            blogid:"",
            content: "",
            editor: null,
            blogtypes:[],
            blog:{},
            blog2:{title:""},
            user:{},
            index:0,
            showTitleNum:0,
            blogs:[],
            comments:[]
        },
        methods: {
            search(){
                var that = this
                axios.post("/api/public/findBlogsByTitle",this.blog2).then(function (resp) {
                    that.blogs = resp.data.data
                    console.log("blogs==")
                    console.log(that.blogs)
                })
            },
            reback(){
                this.index=1
            },
            delOneComment(comment){
                var that = this
                console.log("blogid2==")
                console.log(this.blogid)
                axios.post("/api/user/comment/delOneComment/"+this.blogid,comment).then(function (resp) {
                    axios.get("/api/user/blog/readCommentsById/"+that.blogid).then(function (resp) {
                        that.comments=resp.data.data
                        console.log("comments==")
                        console.log(that.comments)
                    })
                })
            },

            //查看某篇文章的评论
            readComments(blogid){
                this.index=2
                console.log("blogid1==")
                console.log(blogid)
                this.blogid = blogid
                var that = this
                axios.get("/api/user/blog/readCommentsById/"+blogid).then(function (resp) {
                    that.comments=resp.data.data
                    console.log("comments==")
                    console.log(that.comments)
                })

            },
            delById(blogid){
                  var that =  this
                  axios.get("/api/user/blog/delById/"+blogid).then(function (resp) {
                  that.findMyBlogs();
              })
            },
            //仅显示标题
            showTitle() {
                this.showTitleNum = 1;
            },
            //显示摘要
            showMsg() {
                this.showTitleNum = 0;
            },
            findMyBlogs(){
              var that = this
              axios.get("/api/user/blog/findMyBlogs").then(function (resp) {
                  that.blogs=resp.data.data
                  console.log("blogs==")
                  console.log(that.blogs)
              })
            },
            readContent(blogid) {
                sessionStorage.setItem("blogid", blogid);
                window.location.href = "/api/public/go2ReadBlog/" + blogid;
            },
            changIndex2Zero(){
              this.index=0;
            },
            changIndex2One(){
              this.index=1;
              this.findMyBlogs()

            },
            init: function () {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容
                this.editor.txt.html();
            },
            //提交富文本内容
            handleAdd: function() {
                console.log(this.editor.txt.html());
                console.log("this.editor.txt.text()==");
                console.log(this.editor.txt.text());
                this.blog.content = this.editor.txt.html();//提交博客内容
                this.blog.msg = this.editor.txt.text();//提交博客的摘要(由后端截取字符串)
                var that = this;
                axios.post("/api/user/blog/addBlog",this.blog).then(function (resp) {
                    if (resp.data.code == 200) {
                        that.blog = {}
                        that.editor.txt.html("")
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: resp.data.msg,
                            type: 'success'
                        });

                    }
                })


            },
            //查找所有博客类别
            findAllBlogTypes(){
                var that = this
                axios.get("/api/public/findAllBlogTypes").then(function (resp) {
                    that.blogtypes = resp.data.data
                })
            },


        },
        mounted: function () {
            this.init();
            this.findAllBlogTypes();



        }
    })
</script>
</html>